<template>
	<z-paging @query='queryList' ref='paging' v-if="isshow">
		<view class="list">
			<view class="item" v-for="(item, index) in list" :key="index" @click.stop="goDetail(item)">
				<view class="cover"><image :src="item.coverImg" mode=""></image></view>
				<view class="info">
					<view class="one">
						<view class="price">
							<text>￥</text>
							{{ item.coursePriceZk }}
						</view>
						<view class="name">讲师：{{ item.lecturerName }}</view>
					</view>
					<view class="two">{{ item.resourceName }}</view>
					<view class="three">
						<view class="icon">
							<image src="https://yzxk.oss-cn-hangzhou.aliyuncs.com/images/watch.png"></image>
							<text>{{ item.watchNum }}</text>
						</view>
						<view class="icon">
							<image src="https://yzxk.oss-cn-hangzhou.aliyuncs.com/images/praiseIcon.png"></image>
							<text>{{ item.greatNum }}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</z-paging>
</template>

<script>
import { lecturerUploadCourse } from '@/apis/apis.js';
export default {
	data() {
		return {
			id: '',
			list: [],
			isshow:false
		};
	},
	onLoad(options) {
		this.id = options.lecturerId;
		// this.init();
	},
	onShow() {
		this.isshow = true
	},
	onHide() {
		this.isshow = false
	},
	methods: {
		queryList(pageNum, pageSize){
			lecturerUploadCourse({
				pageNum: pageNum,
				pageSize: pageSize
			}).then(res => {
				console.log(res,'我的课程');
				this.list = res.data
				this.$refs.paging.complete(res.data);
			})
		},
		goDetail(v) {
			uni.navigateTo({
				url: '/pages/index/courseItem/courseItem?id=' + v.id
			});
		}
	}
};
</script>

<style scoped lang="scss">
page {
	background: #f7f7f7;
}

.list {
	width: 92%;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	padding-top: 20rpx;

	.item {
		width: 334rpx;
		height: 480rpx;
		border-radius: 20rpx;
		overflow: hidden;
		background-color: #fff;
		margin-bottom: 20rpx;

		.cover {
			width: 100%;
			height: 250rpx;

			& > image {
				width: 100%;
				height: 100%;
			}
		}

		.info {
			padding: 15rpx;

			.one {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin: 14rpx 0;

				.price {
					font-size: 36rpx;
					font-weight: bold;
					color: #ffa025;

					& > text {
						font-size: 22rpx;
					}
				}

				.name {
					font-size: 26rpx;
					color: #b2b2b2;
				}
			}

			.two {
				font-size: 30rpx;
				font-weight: 500;
				color: #111111;
				line-height: 46rpx;
				word-break: break-all;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				/* 这里是超出几行省略 */
				overflow: hidden;
			}

			.three {
				margin: 25rpx 0;
				.icon {
					float: left;
					display: flex;
					align-items: center;
					margin-right: 30rpx;

					& > text {
						font-size: 24rpx;
						color: #b0b0b0;
					}

					& > image {
						width: 26rpx;
						height: 18rpx;
					}
				}
			}
		}
	}
}
</style>
